<!DOCTYPE HTML>
<html>
<head>
    <title>Billing.Service.Web.Test</title>

    <link href="assets/normalize/3.0.1/css/normalize.3.0.1.css" rel="stylesheet" />
    <link href="assets/bootstrap/3.1.1/css/bootstrap.3.1.1.css" rel="stylesheet" />

    <style>
        #parameters .parametersContainer {
            display:none;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-md-2">
            <h2>Methods</h2>
            <ul style="cursor:pointer;font-size:15px;">
                <li onclick="view.switchView('addCatalogItem');">AddCatalogItem</li>
                <li onclick="view.switchView('adjustProductsPrice');">AddjustProductsPrice</li>
                <!--<li onclick="view.switchView('bill');">Bill</li>-->
                <li onclick="view.switchView('getCatalog');">GetCatalog</li>
                <li onclick="view.switchView('runProcedure');">RunProcedure</li>
                <li onclick="view.switchView('updateCatalogItem');">UpdateCatalogItem</li>
            </ul>
        </div>
        <div id="parameters" class="col-md-4">
            <h2>Parameters</h2>
            <div id="addCatalogItemContainer" class="parametersContainer">
                <h3>AddCatalogItem</h3>
                <form class="form-horizontal" data-method="addCatalogItem">
                    <div class="form-group">
                        <label class="control-label" for="catalogName">Catalog Name:</label>
                        <input type="text" class="form-control" id="catalogName" placeholder="Catalog Name" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="id">Id :</label>
                        <input type="number" class="form-control" id="id" placeholder="Id" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="name">Name:</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>
            <div id="adjustProductsPriceContainer" class="parametersContainer">
                <h3>AddjustProductsPrice</h3>
                <form class="form-horizontal" data-method="adjustProductsPrice">
                    <div class="form-group">
                        <label class="control-label" for="index">Index:</label>
                        <input type="text" class="form-control" id="index" placeholder="Index" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>
            <!--<div id="billContainer" class="parametersContainer">
                <h3>Bill</h3>
                <form class="form-horizontal" data-method="bill">
                    <div class="form-group">
                        <label class="control-label" for="product1Id">Product 1:</label>
                        <input type="text" class="form-control" id="product1Id" placeholder="Product 1 Id" />
                        <label class="control-label" for="product1Count">Count :</label>
                        <input type="number" class="form-control" id="product1Count" placeholder="Product 1 Count" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="product2Id">Product 2:</label>
                        <input type="text" class="form-control" id="product2Id" placeholder="Product 2 Id" />
                        <label class="control-label" for="product2Count">Count :</label>
                        <input type="number" class="form-control" id="product2Count" placeholder="Product 2 Count" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="product3Id">Product 3:</label>
                        <input type="text" class="form-control" id="product3Id" placeholder="Product 3 Id" />
                        <label class="control-label" for="product3Count">Count :</label>
                        <input type="number" class="form-control" id="product3Count" placeholder="Product 3 Count" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>-->
            <div id="getCatalogContainer" class="parametersContainer">
                <h3>GetCatalog</h3>
                <form class="form-horizontal" data-method="getCatalog">
                    <div class="form-group">
                        <label class="control-label" for="name">Name:</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>
            <div id="updateCatalogItemContainer" class="parametersContainer">
                <h3>UpdateCatalogItem</h3>
                <form class="form-horizontal" data-method="updateCatalogItem">
                    <div class="form-group">
                        <label class="control-label" for="catalogName">Catalog Name:</label>
                        <input type="text" class="form-control" id="catalogName" placeholder="Catalog Name" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="id">Id :</label>
                        <input type="number" class="form-control" id="id" placeholder="Id" />
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="name">Name:</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>
            <div id="runProcedureContainer" class="parametersContainer">
                <h3>RunProcedure</h3>
                <form class="form-horizontal" data-method="runProcedure">
                    <div class="form-group">
                        <label class="control-label" for="procedure">Procedure:</label>
                        <input type="text" class="form-control" id="procedure" placeholder="Procedure" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Call</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-5">
            <h2>Response</h2>
            <textarea id="responseTxtArea" rows="25" style="width:100%"></textarea>
        </div>
    </div>S
	
    <script src="assets/jquery/1.11.1/js/jquery.1.11.1.js"></script>
    <script src="assets/json2/1.0.0/js/json2.1.0.0.js"></script>
    <script src="assets/sprintf/1.0.0/js/sprintf.1.0.0.js"></script>
	<script>
		// The root URL for the RESTful services
        var view = {
            currentView: null,
            rootURL: 'http://localhost:181/wcf/billing/',
            responseTxtArea: $('#responseTxtArea'),

            wcf: {
                addCatalogItem: function () {
                    var container = $('#addCatalogItemContainer');

                    var data = {
                        CatalogName: $('#catalogName', container).val(),
                        Keys: view.objToHash({
                            Id: $('#id', container).val(),
                        }),
                        Properties: view.objToHash({
                            Name: $('#name', container).val(),
                        }),
                    };

                    $.ajax({
                        type: 'PUT',
                        url: view.rootURL + 'catalogs/addItem',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (document, message, response) {
                            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                            console.debug(data);
                        },
                        error: function (a, b) {
                            view.responseTxtArea.text(b);
                            console.error(b);
                        },
                        async: true,
                    });
                },
                adjustProductsPrice: function () {
                    var container = $('#adjustProductsPriceContainer');

                    var data = parseFloat($('#index', container).val());

                    $.ajax({
                        type: 'POST',
                        url: view.rootURL + 'products/adjustPrice',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (document, message, response) {
                            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                            console.debug(data);
                        },
                        error: function (a, b) {
                            view.responseTxtArea.text(b);
                            console.error(b);
                        },
                        async: true,
                    });
                },
                //bill: function () 
                //{
                //    var container = $('#billContainer');

                //    var data = {
                //        Items: [
                //            {
                //                ProductId: $('#product1Id', container).val(),
                //                ProductCount: $('#product1Count', container).val(),
                //            },
                //            {
                //                ProductId: $('#product2Id', container).val(),
                //                ProductCount: $('#product2Count', container).val(),
                //            },
                //            {
                //                ProductId: $('#product3Id', container).val(),
                //                ProductCount: $('#product3Count', container).val(),
                //            },
                //        ],
                //    };

                //    $.ajax({
                //        type: 'POST',
                //        url: view.rootURL + 'bill',
                //        data: JSON.stringify(data),
                //        contentType: 'application/json',
                //        success: function(document, message, response)
                //        {
                //            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                //            console.debug(data);
                //        },
                //        error: function(a, b)
                //        {
                //            view.responseTxtArea.text(b);
                //            console.error(b);
                //        },
                //        async: true,
                //    });
                //},
                getCatalog: function () {
                    var container = $('#getCatalogContainer');

                    $.ajax({
                        type: 'GET',
                        url: sprintf(
                            '%scatalogs/%s',
                            view.rootURL, 
                            $('#name', container).val()
                        ),
                        contentType: 'application/json',
                        success: function (document, message, response) {
                            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                            console.debug(data);
                        },
                        error: function (a, b) {
                            view.responseTxtArea.text(b);
                            console.error(b);
                        },
                        async: true,
                    });
                },
                runProcedure: function () {
                    var container = $('#runProcedureContainer');

                    var data = {
                        Procedure: $('#procedure', container).val(),
                    };

                    $.ajax({
                        type: 'POST',
                        url: view.rootURL + 'runProcedure',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (document, message, response) {
                            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                            console.debug(data);
                        },
                        error: function (a, b) {
                            view.responseTxtArea.text(b);
                            console.error(b);
                        },
                        async: true,
                    });
                },
                updateCatalogItem: function () {
                    var container = $('#updateCatalogItemContainer');

                    var data = {
                        CatalogName: $('#catalogName', container).val(),
                        Keys: view.objToHash({
                            Id: $('#id', container).val(),
                        }),
                        Properties: view.objToHash({
                            Name: $('#name', container).val(),
                        }),
                    };

                    $.ajax({
                        type: 'POST',
                        url: view.rootURL + 'catalogs/updateItem',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (document, message, response) {
                            view.responseTxtArea.text(JSON.stringify(response.responseJSON));
                            console.debug(data);
                        },
                        error: function (a, b) {
                            view.responseTxtArea.text(b);
                            console.error(b);
                        },
                        async: true,
                    });
                },
            },


            objToHash: function (obj) {
                var dic = [];

                for (var prop in obj)
                    dic.push({ Key: prop, Value: obj[prop] });

                return dic;
            },
            switchView: function (viewName) {
                var viewContainer = $('#' + viewName + 'Container');

                if (view.currentView)
                    view.currentView.hide();

                viewContainer.show();

                view.currentView = viewContainer;
            },

            form_submit: function (e) {
                e.preventDefault();

                var target = $(e.target),
                    methodName;

                methodName = target.data('method');

                view.wcf[methodName]();
            },
        };

        $(document).ready(function () {
            $('form').bind('submit', view.form_submit);
        });

        

        
	
		//function getAntennas()
		//{
		//	$.ajax({
		//		type: 'GET',
		//		url: rootURL + 'antennas',
		//		success: function(data)
		//		{
		//			view.responseTxtArea.text(JSON.stringify(data));
		//			console.debug(data);
		//		},
		//		error: function(a, b)
		//		{
		//			view.responseTxtArea.text(b);
		//			console.error(b);
		//		},
		//		async: true,
		//	});
		//}
		

	</script>
</body>
</html>